<template>
  <div class="login">
    <div class="content">
      <h2 class="topName">后台管理系统</h2>
      <!-- 表单 -->
      <!-- 1用一个  自己封装一个 -->


      <!--
ref:dom
model:表格的数据
 status-icon：icon
rules:验证规则
        -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
       
        class="demo-ruleForm"
      >
        <el-form-item  prop="username">
          <el-input
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
              :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item  prop="checkPass">
          <!-- <el-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          /> -->
          <!-- 密码的input -->
          <Winput @getPassw="getPassw"></Winput>
        </el-form-item>
        <el-form-item  prop="age">
          <!-- <el-input v-model.number="ruleForm.age" /> -->
          <WyerifyI @getPassw="getPassv"></WyerifyI>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()"
            >Submit</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">

import {  User } from '@element-plus/icons-vue' //引入icon
import { reactive, ref,getCurrentInstance } from "vue";  //vue
import type { FormInstance } from "element-plus";  //ts数据类型校验
import { ElMessage } from 'element-plus'
import Winput from '@/W-element/W-input/index.vue'
import WyerifyI from '@/W-element/W-verifyI/index.vue'
import {getLogin} from '@/http/api/login'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
let router = useRouter()
let store = useStore()
const instance:any = getCurrentInstance()
    const _this = instance.appContext.config.globalProperties
//ts 中 数据类型 =》 ref('') => 得到他的数据
const ruleFormRef = ref<FormInstance>(); // dom 操作获取到  form dom

//校验的方法


const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the username"));
  } 
};

//   接口
interface formObj{
  username:string,
  password:string|number,
}

//表单数据
const ruleForm = reactive<formObj>({
username: "",
password:''

});

//校验规则
const rules = reactive({
  username: [{ validator: validatePass, trigger: "blur" }],
 
  
});

const getPassw = (val:string|number)=>{
        console.log(val);//获取到子组件给数据
     ruleForm.password = val
        
}
  let verifyP = ref(false)
const getPassv = (val:any)=>{
      verifyP.value =  val
}
  //点击提交触发=》登录 =》
const submitForm = () => {
     console.log(ruleForm);
     //判断一下
     if(ruleForm.username&&ruleForm.password&&verifyP.value){
        //发送网络请求
        console.log('发送网络请求');
        getLogin({username:ruleForm.username,password:ruleForm.password}).then(res=>{
             //成功跳转到内部页面
            console.log(res);
             if(res.data.code==200){
                  //保存token
                  sessionStorage.setItem('token',res.data.token),
                  sessionStorage.setItem('limit',res.data.limit)
                  sessionStorage.setItem("list",JSON.stringify(res.data.list))
                  //路由跳转
                  // 通过vuex中动态的生成这个用户的动态的路由
                  // 1发送请求 获取到这个用户的
                  store.dispatch('addRouter/ayRchangeRouterList') 
                  router.replace('/layout')

             }else{
              ElMessage.error('用户名或密码错误.')
             }

        })
        
     }else{
        
         ElMessage.error('请输入用户名称或者验证码.')
         
     }
     
};

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};


// 自己使用  elementui  组件

// 1）先根据ui图=》功能基本一致=》变成和ui一样
// 2）这个ui组件库的属性=》 看一下


//2自己封装ui input =>  element ui组件库他里面没有 ui图上的效果（组件） =》自己封装
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  .content {
    margin: 0 auto;
    margin-top: 200px;
    width: 400px;
    padding: 10px 10px;
    border: 2px solid red;
    .topName {
      border-bottom: 2px solid #ccc;
      text-align: center;
      padding-bottom:4px;
    }
  }
}
</style>